<!--
 * @Date: 2024-09-12 10:58:59
 * @Author: Yu Weifeng weifeng.yu@gientech.com
 * @Description: 旭日图
-->
<template>
  <ChartBase :options="chartOptions" :currentEcharts="echarts" class="lc-chart__sunburst" />
</template>
<script setup>
import { chartProps } from '../base.ts';
import { computed } from 'vue';
import ChartBase from '../base.vue';
import { isEmpty } from 'lodash-es';
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  GridComponent,
  TooltipComponent,
  DatasetComponent,
  VisualMapComponent
} from 'echarts/components';
import { SunburstChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  GridComponent,
  TooltipComponent,
  DatasetComponent,
  VisualMapComponent,
  SunburstChart,
  CanvasRenderer
]);

defineOptions({
  name: 'LcChartSunBurst'
});
const props = defineProps(chartProps);

const convertToTree = (flatData, parentId = null) => {
  const children = flatData.filter((node) => {
    return parentId != null ? node.parentId === parentId : !node.parentId;
  });
  if (!children.length) {
    return [];
  }
  return children.map((node) => ({
    ...node,
    children: convertToTree(flatData, node.id)
  }));
};
const processData = (data, mapOptions) => {
  // 设置了映射字段
  if (!isEmpty(mapOptions)) {
    data.forEach((item) => {
      item['name'] = item[mapOptions?.name];
      item['id'] = item[mapOptions?.id];
      item['parentId'] = item[mapOptions?.parentId];
      item['value'] = item[mapOptions?.valueMap];
    });
  }
  return convertToTree(data);
};
const chartOptions = computed(() => {
  const options = props.options;
  const processedData = processData(props.data, props.mapOptions);
  options.series.data = processedData;
  return options;
});
</script>
